<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [1, 2, 3];
    //   arr.reduce((accumulator, current) => {
    //     return accumulator.then(() => {
    //       return new Promise((resolve) => {
    //         setTimeout(() => resolve(console.log(current)), 1000);
    //       });
    //     });
    //   }, Promise.resolve());
    // arr.reduce(
    //   (accumulator, current) =>
    //     accumulator.then(
    //       () =>
    //         new Promise((resolve) =>
    //           setTimeout(() => resolve(console.log(current)), 1000)
    //         )
    //     ),
    //   Promise.resolve()
    // );
    function run(index, arr) {
      if (index >= arr.length) return
      else {
        setTimeout(() => {
          console.log(arr[index])
          run(++index, arr)
        }, 1000);
      }
    }
    run(0, arr)
  </script>
</body>

</html>